<script>
export default {
  name: "ZVirtualItem",
  props: {
    tag: {
      type: String,
      default: 'div'
    },
  },
  mounted () {
    if (typeof ResizeObserver !== 'undefined') {
      this.resizeObserver = new ResizeObserver(() => {
        this.$emit('resize', this.$vnode.key, this.$el.offsetHeight)
      })
      this.resizeObserver.observe(this.$el)
    }
  },
  update () {
    this.resizeObserver.observe(this.$el)
  },
  beforeDestroy () {
    if (this.resizeObserver) {
      this.resizeObserver.disconnect()
      this.resizeObserver = null
    }
  },
  render () {
    const { tag: Tag } = this

    return (
      <Tag class="z-virtual-item">
        {this.$slots.default ? this.$slots.default : null}
      </Tag>
    )
  }
}
</script>